/* component */
import Header from "@gpt/components/prompt-word/header";
import Content from "@gpt/components/prompt-word/content";
import List from "@gpt/components/prompt-word/list";
import Preview from "@gpt/components/prompt-word/preview";
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* model */
import { MAX_PROMPT_WORD_LENGTH } from "@gpt/model";
/* vue */
import { defineComponent, PropType } from "vue";
/* scss */
import "@gpt/components/prompt-word/index.scss";
/* types */
import { SettingGPTPromptWordItem } from "@gpt/types";

type ListComponent = InstanceType<typeof List>

enum SettingGPTPromptWordIndexEventEnum {
  Change = 'change',
  Click = 'click',
  Add = 'add'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTPromptWordIndex,
  emits: [
    SettingGPTPromptWordIndexEventEnum.Change,
    SettingGPTPromptWordIndexEventEnum.Click,
    SettingGPTPromptWordIndexEventEnum.Add
  ],
  props: {
    appName: {
      type: String,
      default: ''
    },
    value: {
      type: Array as PropType<SettingGPTPromptWordItem[]>,
      default: () => []
    },
    onChange: {
      type: Function
    },
    onAdd: {
      type: Function
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.SettingGPTPromptWordIndex]: true
      }
    },
    isLimit(): boolean {
      return this.value.length >= MAX_PROMPT_WORD_LENGTH
    },
    listComponent(): ListComponent {
      return this.$refs.List as ListComponent
    }
  },
  watch: {
    value: {
      handler(value: SettingGPTPromptWordItem[]) {
        this.$nextTick(() => {
          this.clearValidate()
        })
      }
    }
  },
  methods: {
    clearValidate() {
      this.listComponent.clearValidate()
    },
    onChangeHandler(value: SettingGPTPromptWordItem[]) {
      this.$emit(SettingGPTPromptWordIndexEventEnum.Change, value)
    },
    onAddHandler() {
      this.$emit(SettingGPTPromptWordIndexEventEnum.Add)
    },
    validate(): Promise<boolean> {
      return (this.$refs.List as ListComponent).validate()
    },
    renderAddButton() {
      
      if (this.isLimit) {
        return
      }
      
      return (
        <div class="setting-gpt-prompt-word-index-content-add">
          <el-button 
            class="setting-gpt-prompt-word-index-content-add-button"
            type="plain-third"
            onClick={this.onAddHandler}
          >
            添加
          </el-button>
        </div>
      )
      
    },
    renderContentLeft() {
      return (
        <div class="setting-gpt-prompt-word-index-content-left">
          <Header
            value={this.value}
          >
          </Header>
          <List
            ref="List"
            value={this.value}
            onChange={this.onChangeHandler}
          >
          </List>
          {this.renderAddButton()}
        </div>
      )
    },
    renderContentRight() {
      return (
        <div class="setting-gpt-prompt-word-index-content-right">
          <Preview
            appName={this.appName}
            value={this.value}
          >
          </Preview>
        </div>
      )
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        <Content>
          <div slot="left">
            {this.renderContentLeft()}
          </div>
          <div slot="right" class="setting-gpt-prompt-word-right">
            {this.renderContentRight()}
          </div>
        </Content>
      </div>
    )
  }
});